<template>
	<view class="">
		<view class="login-logo">
			<image src='./images/logo.png'></image>
		</view>
		<view class='login-tab'>
			<view v-for="item in itemList" :key="item.id" @click="changeTab(item.com)">{{item.name}}</view>
		</view>
		<view class='login-btn'>
			<!-- <component :is="com"></component> -->
			<component :is='comp'></component>
		</view>
		<button @click='wxlogin' class='wechat'>微信登录</button>
	</view>
</template>

<script>
import {loginAppByWechat} from '@/api/login.js'
import phone from '@/pagePackage/login/component/phoneLogin.vue'
import account from '@/pagePackage/login/component/accountLogin.vue'
export default {
	data(){
		return {
			comp:phone,
			itemList:[
				{
					id:1,
					name:'账号登录',
					com:account
				},
				{
					id:2,
					name:'手机号登录',
					com:phone
				}
			]
		}
	},
	components:{
		phone,
		account
	},
	methods: {
		async login(){
			let {errMsg,code} = await uni.login({
				provider:'weixin',
				onlyAuthorize:true
			})
			if(errMsg == 'login:ok'){
				let res = await loginAppByWechat({
					js_code:code
				})
				console.log(res,'res')
			}
		},
		changeTab(com){
			this.comp = com
		}
	}
}	
</script>

<style>
	.login-logo{
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top:100rpx;
	}
	.login-logo image{
		width:100rpx;
		height: 100rpx;
	}
	.login-tab{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-top:100rpx;
	}
	.wechat{
		width:100%;
		position: fixed;
		bottom:400rpx;
		left:0;
	}
</style>